<template>
	<div class="app-container">
		<div class="bgWhite radius8">
			<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="100px"
				:model="queryParams" ref="queryForm" :inline="true">
				<div>
					<el-form-item label="关键词" prop="keyWords">
						<el-input v-model="queryParams.keyWords" placeholder="请输入关键词" clearable class="resetInput"
							style="width: 200px" :suffix-icon="Search" @keyup.enter="handleQuery" />
					</el-form-item>
					<el-form-item label="常见靶标" prop="commonTarget">
						<el-select v-model="queryParams.commonTarget" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_common_target" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="常见发生区域" prop="commonRegion">
						<el-select v-model="queryParams.commonRegion" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in address" :key="dict.code" :label="dict.name"
								:value="dict.code" />
						</el-select>
					</el-form-item>
					<el-form-item label="常见月份" prop="commonOccurMonth">
						<el-select v-model="queryParams.commonOccurMonth" placeholder="请选择" size="large"
							style="width: 200px">
							<el-option v-for="dict in bus_common_month" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
				</div>
				<el-form-item>
					<div class="flex col-center row-end" style="margin-right: 0">
						<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
						<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 p20 mt25">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">作物列表</span>
				<div>
					<el-button type="defaultBtn" @click="handleAdd"
					v-hasPermi="['crop_variety:add']"
					>
					新增作物
					</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
				<el-table-column label="作物名称" align="center" prop="cropName">
					<template #default="scope">
						<span class="cursor main-color" @click="handleDetail(scope.row)">{{scope.row.cropName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="常见靶标" align="center" prop="commonTarget" width="120">
					<template #default="scope">
						<dict-tag :options="bus_common_target" :value="scope.row.commonTarget" />
					</template>
				</el-table-column>
				<el-table-column label="常见发生区域" align="center" prop="commonRegion">
					<template v-slot="scope">
						{{scope.row.commonRegionName}}
					</template>
				</el-table-column>
				<el-table-column label="常见月份" align="center" prop="commonOccurMonth">
					<template v-slot="scope">
						{{scope.row.commonOccurMonthName}}
					</template>
				</el-table-column>
				<!-- <el-table-column label="生育期" align="center" prop="status">
					<template v-slot="scope">
						
					</template>
				</el-table-column> -->
				<el-table-column label="创建时间" align="center" prop="updateTime" width="200" />
				<el-table-column label="创建人" align="center" prop="createName" width="200" />
				<el-table-column fixed="right" label="操作" align="center" width="100">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleUpdate(scope.row)"
							v-hasPermi="['crop_variety:edit']">编辑</el-button>
						<!-- <el-button size="mini" type="text" @click="handleDelete(scope.row)"
							v-hasPermi="['product:product:remove']">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />	
		</div>
		<operateCrop ref="cropPop" @refreshList="getList"></operateCrop>
	</div>
</template>

<script>
	import {
		listCrop, //列表
	} from "@/api/business/product";
	import {
		Search
	} from '@element-plus/icons-vue'
	import {
		getDivisions
	} from "@/api/business/opportunity";//地址
	import operateCrop from "./components/operateCrop.vue";
	export default {
		components:{
			operateCrop
		},
		data() {
			return {
				bus_common_target:this.useDict('bus_common_target').bus_common_target,
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					keyWords: '', // 
					commonOccurMonth: '', // 常见发生月份
					commonRegion:'',//常见区域
					commonTarget:'',//常见靶标
				}, //查询参数
				address:[],
				bus_common_month:this.useDict('bus_common_month').bus_common_month
			}
		},
		created() {
			this.getAddress()
		},
		methods: {	
			// 查询地址
			getAddress(){
				let query = {
						type: 'provinces',
						pageNum: 1,
						pageSize: 5000
					}
					//查询接口
				getDivisions(query, query.type).then(res => {
					if(res.code == 200){
						this.address = res.rows
						this.getList()
					}
				})
			},
			//查询作物列表
			getList() {
				this.loading = true;
				listCrop(this.queryParams).then((response) => {
					this.list = response.rows;
						for(let j in this.list){
							this.list[j].commonRegion = this.list[j].commonRegion ? this.list[j].commonRegion.split(',') : []
							this.list[j].commonRegionName = []
							this.list[j].commonOccurMonth = this.list[j].commonOccurMonth ? this.list[j].commonOccurMonth.split(',') : [],
							this.list[j].commonOccurMonthName = []
							for(let key in this.address){
								for(let i in this.list[j].commonRegion){
									if(this.address[key].code == this.list[j].commonRegion[i]){
										this.list[j].commonRegionName.push(this.address[key].name)
									}
								}
							}
							this.list[j].commonRegionName = this.list[j].commonRegionName.join(',')
							for(let i in this.bus_common_month){
								for(let key in this.list[j].commonOccurMonth){
									if(this.bus_common_month[i].value == this.list[j].commonOccurMonth[key]){
										this.list[j].commonOccurMonthName.push(this.bus_common_month[i].label)
									}
								}
							}
							this.list[j].commonOccurMonthName = this.list[j].commonOccurMonthName.join(',')
						}
						
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 启用状态操作
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status,
				}
				updateProduct(item).then((response) => {
					this.$modal.msgSuccess("启用状态更新成功");
					this.loading = false;
					this.getList();
				});
			},
			//新增
			handleAdd() {
				this.$refs.cropPop.open('')
			},
			// 编辑
			handleUpdate(row) {
				this.$refs.cropPop.open(row.id)
			},
			// 详情
			handleDetail(row) {
				this.$refs.cropPop.open(row.id,1)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			handleDelete(row) {
				const ids = row.id || this.ids;
				let that = this
				this.$modal
					.confirm('是否确认删除产品编号为"' + ids + '"的数据项？')
					.then(function() {
						delProduct(ids).then(res => {
							that.getList()
							this.$modal.msgSuccess("删除成功");
						})
					})
					.catch(() => {});
			}
		}
	}
</script>